<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂掉落效果 (Matter.js)</title>
    <!-- 引入 Matter.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
<script>
    // 模块别名
    const { Engine, Render, Runner, World, Bodies, Body, Constraint, Composite, Mouse, MouseConstraint } = Matter;

    // 创建引擎
    const engine = Engine.create();
    const world = engine.world;

    // 创建渲染器
    const render = Render.create({
        element: document.body,
        engine: engine,
        options: {
            width: window.innerWidth,
            height: window.innerHeight,
            wireframes: false, // 关闭线框模式
            background: '#f0f8ff', // 设置背景颜色
        },
    });
    Render.run(render);

    // 创建运行器
    const runner = Runner.create();
    Runner.run(runner, engine);

    // 添加地面
    const ground = Bodies.rectangle(window.innerWidth / 2, window.innerHeight - 20, window.innerWidth, 40, {
        isStatic: true,
        render: { fillStyle: '#654321' },
    });
    World.add(world, ground);

    // 添加复杂障碍物
    const obstacle1 = Bodies.rectangle(300, 400, 200, 20, {
        angle: Math.PI / 6,
        isStatic: true,
        render: { fillStyle: '#ff6347' },
    });
    const obstacle2 = Bodies.circle(600, 300, 50, {
        isStatic: true,
        render: { fillStyle: '#32cd32' },
    });
    const obstacle3 = Bodies.rectangle(800, 200, 150, 20, {
        angle: Math.PI / 4,
        isStatic: true,
        render: { fillStyle: '#ffa500' },
    });
    const obstacle4 = Bodies.polygon(1000, 500, 5, 50, {
        isStatic: true,
        render: { fillStyle: '#9370db' },
    });
    World.add(world, [obstacle1, obstacle2, obstacle3, obstacle4]);

    // 每3秒生成一个球
    setInterval(() => {
        const ball = Bodies.circle(Math.random() * window.innerWidth, 50, 30, {
            restitution: 0.8, // 弹性
            friction: 0.1, // 摩擦力
            density: 0.04, // 密度
            render: {
                fillStyle: 'rgba(255, 69, 0, 0.8)',
                strokeStyle: '#fff',
                lineWidth: 2,
            },
        });
        World.add(world, ball);

        // 检测球是否落地，落地后5秒消失
        const checkIfLanded = () => {
            if (ball.position.y >= window.innerHeight - 50) {
                setTimeout(() => {
                    World.remove(world, ball);
                }, 5000);
            } else {
                requestAnimationFrame(checkIfLanded);
            }
        };
        checkIfLanded();
    }, 1000);

    // 鼠标控制
    const mouse = Mouse.create(render.canvas);
    const mouseConstraint = MouseConstraint.create(engine, {
        mouse: mouse,
        constraint: {
            stiffness: 0.2,
            render: { visible: false },
        },
    });
    World.add(world, mouseConstraint);
    render.mouse = mouse;

    // 窗口大小调整
    window.addEventListener('resize', () => {
        render.canvas.width = window.innerWidth;
        render.canvas.height = window.innerHeight;
        Matter.Body.setPosition(ground, { x: window.innerWidth / 2, y: window.innerHeight - 20 });
        Matter.Body.scale(ground, window.innerWidth / ground.bounds.max.x, 1);
    });
</script>
</body>
</html>